<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D魔方</title>
		<style>
			/* 通用选择器：规范页面结构---盒模型 ：内外边距*/
			*{
				margin:0;
				padding:0;
			}
			/* 
			 1.容器：视觉效果，特点：①宽高 ②居中 ③视觉属性*/
			 .container{
				 width: 300px;
				 height: 300px;
				 /* 边框：确定选择器是否选中*/
				 bo rder:1px solid red;
				 /* 居中*/
				 margin:200px auto;
				 /* 视觉属性：数值px    拉开距离*/
				 perspective: 3000px;
			 }
			 /* 2.魔方整体：3D主体部分，特点：①宽高②3D效果层X,Y,Z轴③查看3D效果层④动画*/
			 .box{
				 width: 300px;
				 height: 300px;
				 bor der:1px solid red;
				 /* 3D效果层：X,Y,Z坐标轴*/
				 transform-style: preserve-3d;
				 /* 查看3D效果层：X 45deg  Y45deg  */
				 transform: rotateX(45deg) rotateY(45deg);
				 /* 动画*/
				 animation: mofang 6s linear infinite;
			 }
			 @keyframes mofang{
				 0%{
					 transform: rotateX(45deg) rotateY(45deg);
				 }
				 70%{
					 transform: rotateX(180deg) rotateY(180deg);
				 }
				 100%{
					 transform: rotateX(360deg) rotateY(360deg);
				 }
			 }
			 /* 3.六个面，公共面：①宽高一致②绝对定位*/
			 .page{
				 width:300px;
				 height: 300px;
				 /* 绝对定位：定一个基准点，X,Y,Z轴调整*/
				 position: absolute;
			 }
			/* 3.1六个面的颜色 */
			.page_top{
				background-color: #e4393c;
				/* Z轴  上面平移150px */
				transform: translateZ(150px);
				background-image:url(../Project/img/麦1.jpg);
				background-size: 100% 100%;
			}
			.page_bottom{
				background-color: #c8219c;
				/* Z轴  下面平移150px */
				transform: translateZ(-150px);
				background-image:url(../Project/img/麦2.jpg);
				background-size: 100% 100%;
			}
			.page_left{
				background-color: #09c5c8;
				/* 左面 X 平移150px；Y轴旋转 90deg  */
				transform: translateX(-150px) rotateY(90deg);
				background-image:url(../Project/img/麦3.jpg);
				background-size: 100% 100%;
			}
			.page_right{
				background-color: #71c83b;
				/* 右面 X 平移150px；Y轴旋转 -90deg  */
				transform: translateX(150px) rotateY(-90deg);
				background-image:url(../Project/img/麦4.jpg);
				background-size: 100% 100%;
			}
			.page_before{
				/* 前面 Y 平移150px X轴旋转-90deg*/
				background-color: #c8aeb9;
				transform: translateY(150px) rotateX(-90deg);
				background-image:url(../Project/img/麦5.jpg);
				background-size: 100% 100%;
			}
			.page_after{
				/* 后面 Y 平移-150px X旋转90deg */
				background-color: #0d55c8;
				transform: translateY(-150px) rotateX(90deg);
				background-image:url(../Project/img/麦6.jpg);
				background-size: 100% 100%;
			}
			
		</style>
	</head>
	<body>
		<!-- 魔方：8个div组成
		     外层div：视觉差、居中
			 魔方整体div:6个面、包起来
		 -->
		<div class="container">
			<div class="box">
				<!-- 6个面 ：公共属性：宽高一致
				                     颜色不一致
				-->
				<div class="page page_top"></div> 
				<div class="page page_bottom"></div>
				<div class="page page_left"></div>
				<div class="page page_right"></div>
				<div class="page page_before"></div>
				<div class="page page_after"></div>
			</div>
		</div>
		<audio src="../Project/img/大耳朵图图_爱给网_aigei_com.mp3" autoplay loop></audio>
	</body>
</html>